<template>
  <div class="headerTitle">房产信息</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">土地性质</div>
      <div class="itemValue" @click="landNatureShow = true">
        <div>
          {{ houseInfo.landNature ? houseInfo.landNature : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="landNatureShow"
          :columns="landNatureCols"
          :defaultIndex="[0]"
          @cancel="landNatureShow = false"
          @confirm="checkLandNature"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">房屋类型</div>
      <div class="itemValue" @click="houseCateShow = true">
        <div>
          {{ houseInfo.houseCate ? houseInfo.houseCate : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="houseCateShow"
          :columns="houseCateCols"
          :defaultIndex="[0]"
          @cancel="houseCateShow = false"
          @confirm="checkHouseCate"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">共有情况</div>
      <div class="itemValue" @click="commonSituationShow = true">
        <div>
          {{ houseInfo.commonSituation ? houseInfo.commonSituation : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-picker
          :show="commonSituationShow"
          :columns="commonSituationCols"
          :defaultIndex="[0]"
          @cancel="commonSituationShow = false"
          @confirm="checkCommonSituation"
        ></up-picker>
      </div>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="houseInfo"
      >
        <up-form-item
          label="坐落"
          prop="base"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="houseInfo.base"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="houseInfo"
      >
        <up-form-item
          label="房屋面积"
          prop="houseArea"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="houseInfo.houseArea"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="houseInfo"
      >
        <up-form-item
          label="房屋价值"
          prop="houseValue"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="houseInfo.houseValue"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="areaItem">
      <div class="itemTitle">是否抵押</div>
      <div class="itemValue" @click="isPledgeShow = true">
        <div>
          {{ houseInfo.isPledge ? houseInfo.isPledge : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-picker
          :show="isPledgeShow"
          :columns="isPledgeCols"
          :defaultIndex="[0]"
          @cancel="isPledgeShow = false"
          @confirm="checkIsPledge"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">购置时间</div>
      <div class="itemValue" @click="buyTimeShow = true">
        <div>
          {{ houseInfo.buyTime ? houseInfo.buyTime : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-datetime-picker
          hasInput
          :show="buyTimeShow"
          mode="date"
          @cancel="buyTimeShow = false"
          :minDate="startTime"
          :maxDate="nowTime"
          @confirm="checkBuyTime"
        ></up-datetime-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">竣工时间</div>
      <div class="itemValue" @click="doneTimeShow = true">
        <div>
          {{ houseInfo.doneTime ? houseInfo.doneTime : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-picker
          :show="doneTimeShow"
          :columns="doneTimeCols"
          :defaultIndex="[0]"
          @cancel="doneTimeShow = false"
          @confirm="checkDoneTime"
        ></up-picker>
      </div>
    </div>
  </div>

  <div class="headerTitle">材料要求</div>
  <div class="askArea">
    <div class="askItem">1、提供支付宝公积金查询详细照片</div>
    <div class="askItem">1、提供缴存单位企业查查信息详细照片</div>
  </div>

  <div class="headerTitle">相关证明材料影像件</div>
  <div class="mainArea">
    <up-textarea
      v-model="moreInfo"
      placeholder="请输入"
      autoHeight
      border="none"
    >
    </up-textarea>
    <div class="addImgArea">
      <img
        src="./img/new_icon_01.png"
        alt=""
        class="chooseImg"
        @click="chooseImg"
      />
      <img
        v-for="(item, index) in imgList"
        :key="index"
        :src="item"
        alt=""
        class="chooseImg"
      />
    </div>
    <div class="btnArea">
      <div class="btn close" @click="closePage">关闭</div>
      <div class="btn save" @click="savePage">保存</div>
    </div>
  </div>
</template>

<script setup>
import * as utils from "../../utils/utils";
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
const store = useAppStore();
const startTime = ref(0);
const nowTime = ref(0);
import { useImagePicker } from '@/hooks/useImagePicker';
const { imgList, chooseImg, uploadFiles } = useImagePicker(); 
onMounted(() => {
  let startDate = new Date("1980-01-01 00:00:00");
  startTime.value = startDate.getTime(); //开始时间戳
  let nowDate = new Date();
  nowTime.value = nowDate.getTime(); //当前时间戳
  let nowYear = nowDate.getFullYear(); //当前年份
  for (let i = nowYear; i >= 1980; i--) {
    doneTimeCols[0].push(i);
  }
});
const isCheck = ref(false);
let orderId = null;
onLoad((option) => {
  let param = JSON.parse(option.value);
  if (param.isCheck) {
    isCheck.value = true;
    http.creditHouseDetail({ id: param.id }).then((res) => {
      houseInfo.landNature = res.data.landPrototype;
      houseInfo.houseCate = res.data.houseType;
      houseInfo.commonSituation = res.data.ownershipType;
      houseInfo.base = res.data.address;
      houseInfo.houseArea = res.data.houseArea;
      houseInfo.houseValue = res.data.buyPrice;
      houseInfo.isPledge = res.data.pledgeStatus;
      houseInfo.buyTime = res.data.buyTime;
      houseInfo.doneTime = res.data.completeYear;
      moreInfo.value = res.data.supplementExplain;
    });
  } else {
    orderId = param.orderId;
  }
});
const houseInfo = reactive({
  landNature: "", //土地性质
  houseCate: "", //房屋类型
  commonSituation: "", //共有情况
  base: "", //坐落
  houseArea: "", //房屋面积
  houseValue: "", //房屋价值
  isPledge: "", //是否抵押
  buyTime: "", //购置时间
  doneTime: "", //竣工时间
});
// 补充信息
const moreInfo = ref("");
// 土地性质
const landNatureShow = ref(false);
const landNatureCols = reactive([["出让", "划拨", "其他"]]);
const checkLandNature = (e) => {
  houseInfo.landNature = e.value[0];
  landNatureShow.value = false;
};
// 房屋类型
const houseCateShow = ref(false);
const houseCateCols = reactive([
  ["住宅", "商业用房", "办公用房", "工业用房", "仓储用房", "其他"],
]);
const checkHouseCate = (e) => {
  houseInfo.houseCate = e.value[0];
  houseCateShow.value = false;
};
// 共有情况
const commonSituationShow = ref(false);
const commonSituationCols = reactive([["共同共有", "单独所有", "按份共有"]]);
const checkCommonSituation = (e) => {
  houseInfo.commonSituation = e.value[0];
  commonSituationShow.value = false;
};
// 是否抵押
const isPledgeShow = ref(false);
const isPledgeCols = reactive([["是", "否"]]);
const checkIsPledge = (e) => {
  houseInfo.isPledge = e.value[0];
  isPledgeShow.value = false;
};
// 竣工时间
const doneTimeShow = ref(false);
const doneTimeCols = reactive([[]]);
const checkDoneTime = (e) => {
  houseInfo.doneTime = e.value[0];
  doneTimeShow.value = false;
};

// 购置时间
const buyTimeShow = ref(false);
const checkBuyTime = (e) => {
  houseInfo.buyTime = utils.getFormatDate(e.value);
  buyTimeShow.value = false;
};

// 关闭
const closePage = () => {
  wx.navigateBack({ delta: 1 });
};
// 保存
const savePage = async () => {
  if (isCheck.value) {
    wx.navigateBack({ delta: 1 });
  } else {
    const fileInfoList = await uploadFiles();  
    console.log('fileInfoList----', fileInfoList);
    http
      .creditHouseAdd({
        creditFirstType: "2",
        creditSecondType: "4",
        orderId,
        creditId: store.creditId,
        //房屋类型
        houseType:
          houseInfo.houseCate === "住宅"
            ? "1"
            : houseInfo.houseCate === "商业用房"
            ? "2"
            : houseInfo.houseCate === "办公用房"
            ? "3"
            : houseInfo.houseCate === "工业用房"
            ? "4"
            : houseInfo.houseCate === "仓储用房"
            ? "5"
            : "6",
        //共有情况
        ownershipType:
          houseInfo.commonSituation === "共同共有"
            ? "1"
            : houseInfo.commonSituation === "单独所有"
            ? "2"
            : "3",
        address: houseInfo.base,
        //土地性质
        landPrototype:
          houseInfo.landNature === "出让"
            ? "1"
            : houseInfo.landNature === "划拨"
            ? "2"
            : "3",
        houseArea: houseInfo.houseArea,
        buyPrice: houseInfo.houseValue,
        buyTime: houseInfo.buyTime,
        pledgeStatus: houseInfo.isPledge,
        completeYear: houseInfo.doneTime,
        supplementExplain: moreInfo.value,
      })
      .then((res) => {
        wx.showToast({
          title: "保存成功",
          icon: "none",
          duration: 1000,
          mask: true,
        });
        setTimeout(() => {
          wx.navigateBack();
        }, 1000);
      })
      .catch((err) => {
        wx.showToast({
          title: "保存失败",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      });
  }
};
</script>

<style scoped lang="scss">
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.askArea {
  padding: 10rpx 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  .askItem {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #666666;
  }
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .formItem {
    padding-left: 5rpx;
    height: 88rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
      .selectIcon {
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
        transform: rotate(45deg);
        margin-left: 13rpx;
      }
    }
  }
  .addImgArea {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .chooseImg {
      width: 90rpx;
      height: 82rpx;
      margin: 20rpx 10rpx;
    }
  }
  .btnArea {
    display: flex;
    padding: 40rpx 0;
    justify-content: center;
    align-items: center;
    .btn {
      width: 110rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      border-radius: 8rpx;
      margin: 0 10rpx;
    }
    .close {
      background-color: #c0c0c0;
    }
    .save {
      background-image: linear-gradient(to right, #619df1, #4478c1);
    }
  }
}
</style>
